<template>
    <view class="history-item-container">
        <view :class="statusClass">
            <span>{{ statusText }}</span>
        </view>
        <view class="history-item-info-container">
            <view class="mobile-container">
                <span>收件人手机号：</span>
                <span class="mobile">{{ mobile }}</span>
            </view>
            <view class="other-container">
                <span>创建时间：{{ createTime }}</span>
            </view>
            <view class="other-container">
                <span>发送时间：{{ sendTime }}</span>
            </view>
        </view>
        <view class="type">
            <span>{{ typeText }}</span>
        </view>
    </view>
</template>

<script setup>
import { computed, onBeforeMount, onMounted, ref, watch } from 'vue';
const props = defineProps({
    mobile: String,
    createTime: String,
    sendTime: String,
    type: Number,
    status: Number
});
const statusClass = ref('');
const statusText = ref('');
const typeText = ref('');
onBeforeMount(() => {
    statusClass.value = props.status === 0 ? 'draft-status status' : 'send-status status';
    statusText.value = props.status === 0 ? '暂存' : '已发送';
    typeText.value = props.type === 0 ? '书信' : '短信';
});
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.history-item-container {
    @extend .row-layout;
    background-color: white;
    border-radius: 10px;
    position: relative;
    padding: 15px;
    .status {
        display: flex;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 0 10px;
        min-width: 57px;
        height: 23px;
        justify-content: center;
        align-items: center;
        span {
            color: white;
            font-size: 12px;
        }
    }
    .draft-status {
        background-color: #ff8686;
    }
    .send-status {
        background-color: #88baff;
    }
    .history-item-info-container {
        @extend .column-layout;
        align-items: flex-start;
        flex: 1;
        .mobile-container {
            @extend .row-layout;
            justify-content: flex-start;
            margin-bottom: 5px;
            .mobile {
                color: black;
                font-size: 16px;
            }
        }
        .other-container {
            margin-top: 5px;
            span {
                color: #666666;
                font-size: 12px;
            }
        }
    }
    .type {
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: flex-end;
        border-radius: 30px;
        border: 1px solid #c4c4c4;
        width: 60px;
        height: 24px;
        span {
            color: #666666;
            font-size: 14px;
        }
    }
}
</style>
